<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form :config="config" v-model="fdata" ref="ruleForm">
            <div slot="menuLeft">
                <el-button
                    class="button-item"
                    :loading="btnLoading"
                    type="primary"
                    @click="store('ruleForm')"
                    size="small"
                >
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
        </one-form>
    </div>
</div>
{include file='common@components/one-form'}
<script>
    const _group = JSON.parse('{:json_encode((array)$group, 1)}');
    const app = new Vue({
        el: '#app',
        data() {
            return {
                uploading: false,
                loading: false,
                btnLoading: false,
                config: {
                    formdesc: [
                        {
                            label: '所属会员组 :',
                            prop: 'group_id',
                            type: 'select',
                            rules: [
                                { required: true, message: '请选择所属会员组' },
                            ],
                            options: _group,
                        },
                        {
                            label: '生成数量 :',
                            prop: 'number',
                            type: 'input',
                            rules: [
                                { required: true, message: '生成数量不能为空' },
                            ],
                            bind: {
                                placeholder: '请输入生成数量',
                            },
                        },
                        {
                            label: '有效期(单位：分钟) :',
                            prop: 'exp_time',
                            type: 'input',
                            bind: {
                                type: 'number',
                                placeholder: '请输入有效期，0为永久',
                            },
                            content: '0为永久有效',
                        },
                        {
                            label: '卡密类型 :',
                            prop: 'code_type',
                            type: 'radio',
                            options: [
                                {
                                    label: '一次性',
                                    value: 1,
                                },
                                {
                                    label: '可复用',
                                    value: 2,
                                },
                            ],
                            content:
                                '可复用的卡密类型谨慎设置永久有效，建议搭配有效期一起设置，否则可能会被人拿去恶意举报',
                        },
                        {
                            label: '可用次数 :',
                            prop: 'use_num',
                            type: 'input',
                            bind: {
                                type: 'number',
                                placeholder: '请输入有效期，0为永久',
                            },
                            content:
                                '复用类型卡密的可使用次数，超出该设置将无法使用；该设置对一次性卡密无效',
                        },
                    ],
                    labelWidth: '200px',
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                fdata: {
                    group_id: '',
                    number: 1,
                    exp_time: 0,
                    code_type: 1,
                    use_num: 1,
                },
            };
        },
        created() {},
        mounted() {},
        methods: {
            //表单验证
            getFormPromise(form) {
                return new Promise((resolve) => {
                    form.validate((res) => {
                        resolve(res);
                    });
                });
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(
                    (res) => {
                        const validateResult = res.every((item) => !!item);
                        if (validateResult) {
                            _this.loading = true;
                            request({
                                params: {
                                    s: 'codekey/index/createCodekey',
                                },
                                method: 'post',
                                data: _this.fdata,
                            }).then((e) => {
                                _this.loading = false;
                                if (e.data.code == 0) {
                                    _this.backpage();
                                } else {
                                    _this.$message.error(e.data.msg);
                                }
                            });
                        } else {
                            console.log('表单未校验通过');
                        }
                    }
                );
            },
            backpage() {
                navigateTo({
                    s: 'codekey/index/index',
                });
            },
        },
    });
</script>
